﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Wijmo Demos</title>
    <link href="base-reset.css" rel="stylesheet" type="text/css" />
    <link type="text/css" href="../themes/aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
    <link type="text/css" href="demos.css" rel="stylesheet" />
    <script src="../external/jquery-1.4.3.min.js" type="text/javascript">
    </script>
    <script src="../external/jquery-ui-1.8.6.custom.min.js" type="text/javascript">
    </script>
    <script type="text/javascript" src="../external/jquery.bgiframe-2.1.3-pre.js">
    </script>
    <link type="text/css" href="../themes/wijmo/jquery.wijmo-open.0.8.2.css" rel="stylesheet" />
    <script src="../external/jquery.wijmo-open.0.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../wijmo/jquery.plugin.wijtextselection.js"></script>
    <script src="../external/jquery.mousewheel.min.js" type="text/javascript">
    </script>
    <script type="text/javascript" src="../wijmo/jquery.ui.wijdatasource.js">
    </script>
    <link type="text/css" href="../themes/wijmo/jquery.ui.wijcombobox.css" rel="stylesheet" />
    <script type="text/javascript" src="../wijmo/jquery.ui.wijcombobox.js">
    </script>
    <link type="text/css" href="../themes/wijmo/jquery.ui.wijinput.css" rel="stylesheet" />
    <script type="text/javascript" src="../wijmo/jquery.ui.wijinputcore.js"></script>
    <script type="text/javascript" src="../wijmo/jquery.ui.wijinputmask.js"></script>
    <script type="text/javascript" src="../wijmo/jquery.ui.wijinputnumber.js"></script>
    <script type="text/javascript" src="../wijmo/jquery.ui.wijinputdate.js"></script>
    <script type="text/javascript" src="../wijmo/jquery.ui.wijtree.js">
    </script>
    <link type="text/css" href="../themes/wijmo/jquery.ui.wijtree.css" rel="stylesheet" />
    <script src="../external/raphael.js" type="text/javascript">
    </script>
    <script src="../external/raphael-popup.js" type="text/javascript"></script>
    <script src="../external/jquery.glob.min.js" type="text/javascript"></script>
    <script src="../wijmo/jquery.ui.wijchartcore.js" type="text/javascript">
    </script>
    <script src="../wijmo/jquery.ui.wijlinechart.js" type="text/javascript">
    </script>
    <script src="../wijmo/jquery.ui.wijpiechart.js" type="text/javascript">
    </script>
    <script src="../wijmo/jquery.ui.wijbarchart.js" type="text/javascript"></script>
    <link href="../themes/wijmo/jquery.ui.wijpager.css" rel="stylesheet" type="text/css" />
    <script src="../wijmo/jquery.ui.wijpager.js" type="text/javascript"></script>
    <link href="../themes/wijmo/jquery.ui.wijgrid.css" rel="stylesheet" type="text/css" />
    <script src="../wijmo/jquery.ui.wijgrid.js" type="text/javascript"></script>
    <link href="../themes/wijmo/jquery.ui.wijwizard.css" rel="stylesheet" type="text/css" />
    <script src="../wijmo/jquery.ui.wijwizard.js" type="text/javascript"></script>
    <script src="JScript.js" type="text/javascript">
    </script>
</head>
<body>
    <div id="doc3" class="yui-t1">
        <div id="hd" role="banner">
            <h1>
                <a href="index.html">Wijmo - jQuery UI Widgets</a></h1>
        </div>
        <div id="bd" role="main">
            <div id="yui-main">
                <div class="yui-b">
                    <div class="yui-gc">
                        <div role="main" class="yui-u normal first">
                            <h3>
                                Instructions</h3>
                            <p>
                                These demos showcase the ComponentOne jQuery Widgets. Simply copy and paste code
                                from the demos to get started. Have fun playing with them.
                            </p>
                            <div id="robowijmo">
                            </div>
                            <script type="text/javascript">
                                function drawRobo() {
                                    var paper = Raphael("robowijmo", 256, 256);

                                    var st = paper.set();

                                    //claw-left
                                    var clawLeft = paper.path("M9.854,96.935l-8.155,2.756L0,108.13l5.025,4.422l1.567-8.652l4.703,0.851l-1.434,7.926l4.763-1.607 l1.692-8.445L9.854,96.935z");
                                    clawLeft.attr("fill", "#404041");
                                    clawLeft.attr("stroke", "none");
                                    st.push(clawLeft);

                                    //arm-left
                                    var armLeft = paper.path("M21.984,69.342l-11.838,30.822L6.65,98.825l11.834-30.823L21.984,69.342z");
                                    armLeft.attr("fill", "#404041");
                                    armLeft.attr("stroke", "none");
                                    st.push(armLeft);

                                    //arm-socket-left
                                    var armSocketLeft = paper.path("M22.783,80.283l-5.402,0.019l-0.067-16.664l5.409-0.017L22.783,80.283z");
                                    armSocketLeft.attr("fill", "#404041");
                                    armSocketLeft.attr("stroke", "none");
                                    st.push(armSocketLeft);

                                    //arm-socket-left shine
                                    var armSocketLeftShine = paper.path("M23.965,64.754h-5.682v8.416h0.432l0.625-7.718h4.625V64.754z");
                                    armSocketLeftShine.attr("fill", "#626366");
                                    armSocketLeftShine.attr("stroke", "none");
                                    st.push(armSocketLeftShine);

                                    //claw-right
                                    var clawRight = paper.path("M105.743,96.935l8.154,2.756l1.699,8.439l-5.025,4.422l-1.567-8.652l-4.703,0.851l1.434,7.926l-4.764-1.607 l-1.693-8.445L105.743,96.935z");
                                    clawRight.attr("fill", "#404041");
                                    clawRight.attr("stroke", "none");
                                    st.push(clawRight);

                                    //arm-right
                                    var armRight = paper.path("M93.612,69.342l11.836,30.822l3.498-1.339L97.11,68.002L93.612,69.342z");
                                    armRight.attr("fill", "#404041");
                                    armRight.attr("stroke", "none");
                                    st.push(armRight);

                                    //arm-socket-right
                                    var armSocketRight = paper.path("M98.216,80.304l-5.404-0.02l0.06-16.664l5.404,0.02L98.216,80.304z");
                                    armSocketRight.attr("fill", "#404041");
                                    armSocketRight.attr("stroke", "none");
                                    st.push(armSocketRight);

                                    //arm-socket-right shine
                                    var armSocketRightShine = paper.path("M91.534,64.754h5.681v8.416h-0.431l-0.631-7.718h-4.619V64.754z");
                                    armSocketRightShine.attr("fill", "#626366");
                                    armSocketRightShine.attr("stroke", "none");
                                    st.push(armSocketRightShine);

                                    //antenna-left
                                    var antennaLeft = paper.path("M41.577,28.524c0.25,0.398,0.133,0.92-0.264,1.169l-0.447,0.282c-0.396,0.251-0.92,0.132-1.17-0.266 L24.665,7.14c-0.252-0.399-0.133-0.92,0.266-1.17l0.445-0.281c0.396-0.252,0.922-0.132,1.17,0.263L41.577,28.524z");
                                    antennaLeft.attr("fill", "#404041");
                                    antennaLeft.attr("stroke", "none");
                                    st.push(antennaLeft);

                                    //antenna-ball-left
                                    var antennaBallLeft = paper.path("M27.47,2.019c1.271,2.018,0.664,4.693-1.354,5.964c-2.021,1.277-4.694,0.672-5.968-1.348 c-1.273-2.021-0.67-4.692,1.352-5.969C23.521-0.606,26.192-0.002,27.47,2.019");
                                    antennaBallLeft.attr("fill", "#404041");
                                    antennaBallLeft.attr("stroke", "none");
                                    st.push(antennaBallLeft);

                                    //antenna-ball-left shine
                                    var antennaBallLeftShine = paper.path("M25.968,2.56c0,0.838-0.967,1.517-2.16,1.517c-1.194,0-2.16-0.679-2.16-1.517s0.966-1.517,2.16-1.517 C25.001,1.042,25.968,1.722,25.968,2.56");
                                    antennaBallLeftShine.attr("fill", "#626366");
                                    antennaBallLeftShine.attr("stroke", "none");
                                    st.push(antennaBallLeftShine);

                                    //antenna-right
                                    var antennaRight = paper.path("M73.309,29.459c-0.248,0.398-0.131,0.92,0.264,1.169l0.449,0.285c0.396,0.248,0.92,0.131,1.17-0.268 l8.48-13.392c0.254-0.394,0.135-0.916-0.264-1.168l-0.445-0.28c-0.398-0.253-0.92-0.134-1.17,0.264L73.309,29.459z");
                                    antennaRight.attr("fill", "#404041");
                                    antennaRight.attr("stroke", "none");
                                    st.push(antennaRight);

                                    //antenna-ball-right
                                    var antennaBallRight = paper.path("M80.6,12.545c-1.275,2.021-0.668,4.693,1.35,5.967c2.023,1.275,4.693,0.669,5.969-1.35 c1.277-2.019,0.67-4.693-1.355-5.967C84.545,9.923,81.877,10.524,80.6,12.545");
                                    antennaBallRight.attr("fill", "#404041");
                                    antennaBallRight.attr("stroke", "none");
                                    st.push(antennaBallRight);

                                    //antenna-ball-right shine
                                    var antennaBallRightShine = paper.path("M86.42,13.394c0,0.838-0.967,1.517-2.16,1.517s-2.16-0.679-2.16-1.517s0.967-1.517,2.16-1.517 S86.42,12.556,86.42,13.394");
                                    antennaBallRightShine.attr("fill", "#626366");
                                    antennaBallRightShine.attr("stroke", "none");
                                    st.push(antennaBallRightShine);

                                    //radio waves
                                    var radioWaves = paper.path("M30.917,4.328l14.561,9.373l15.315-8.258l9.631,12.156l6.5-2.883l-6.804,7.745L60.424,9.943l-14.691,9.752 L30.917,4.328z");
                                    radioWaves.attr("fill", "#8DC63F");
                                    radioWaves.attr("stroke", "none");
                                    st.push(radioWaves);

                                    //jet
                                    var jet = paper.path("M45.2,106.054c0,0,2.141-2.855,12.438-2.855c10.292,0,12.52,2.855,12.52,2.855 c0.746,0,1.354-0.605,1.354-1.35l-1.717-7.699c0-0.746-0.604-1.353-1.352-1.353H46.915c-0.74,0-1.35,0.606-1.35,1.353l-1.717,7.699 C43.849,105.449,44.456,106.054,45.2,106.054");
                                    jet.attr("fill", "#404041");
                                    jet.attr("stroke", "none");
                                    st.push(jet);

                                    //jet connector
                                    var jetConnector = paper.path("M32.835,92.593c2.326,2.61,5.061,4.847,8.098,6.621c0.355,0.205,1.434,0.067,1.652-0.16 c0.664-0.684,1.592-1.112,2.615-1.112h24.958c1.025,0,1.953,0.429,2.619,1.112c0.217,0.228,1.238,0.396,1.578,0.201 c3.064-1.777,5.826-4.029,8.172-6.662H32.835z");
                                    jetConnector.attr("fill", "#404041");
                                    jetConnector.attr("stroke", "none");
                                    st.push(jetConnector);

                                    //body
                                    var bodyShell = paper.path("M93.729,56.453c-1.313-18.696-16.889-33.458-35.92-33.458c-18.952,0-34.481,14.637-35.908,33.226 c-0.053,0.677-0.088,20.25-0.098,29.318c0,4.146,4.147,4.516,4.147,4.516h64.06c0,0,3.801-0.37,3.801-4.618 C93.811,76.36,93.772,57.068,93.729,56.453 M70.147,67.465c-3.373,3.357-7.564,5.063-12.458,5.063 c-4.802,0-8.927-1.709-12.265-5.077c-3.341-3.372-5.033-7.531-5.033-12.367c0-4.787,1.705-8.949,5.067-12.373 c3.364-3.426,7.478-5.165,12.23-5.165c4.793,0,8.958,1.734,12.372,5.149c3.426,3.418,5.16,7.585,5.16,12.389 C75.221,59.928,73.512,64.093,70.147,67.465");
                                    bodyShell.attr("fill", "#404041");
                                    bodyShell.attr("stroke", "none");
                                    st.push(bodyShell);

                                    //body shine
                                    var bodyShine = paper.path("M25.705,48.469c4.609-13.143,17.471-22.598,32.131-22.598c14.661,0,27.522,9.455,32.131,22.598h0.414 c-4.516-13.656-17.375-23.511-32.545-23.511c-15.17,0-28.029,9.855-32.547,23.511H25.705z");
                                    bodyShine.attr("fill", "#626366");
                                    bodyShine.attr("stroke", "none");
                                    st.push(bodyShine);

                                    //iris
                                    var iris = paper.circle(58.13, 55.239, 17);
                                    iris.attr("fill", "#00A5D9");
                                    iris.attr("stroke", "#FFFFFF");
                                    iris.attr("stroke-width", "1.8957");
                                    st.push(iris);

                                    //iris shine
                                    var irisShine = paper.path("M69.146,47.185c-2.473-3.545-6.576-5.87-11.227-5.87c-7.559,0-13.686,6.127-13.686,13.685 c0,3.083,1.031,5.918,2.752,8.207");
                                    irisShine.attr("fill", "#50C8E8");
                                    irisShine.attr("stroke", "none");
                                    st.push(irisShine);

                                    //pupil
                                    var pupil = paper.circle(58.13, 55.239, 8.5);
                                    pupil.attr("fill", "#FFFFFF");
                                    pupil.attr("stroke", "#00A5D9");
                                    pupil.attr("stroke-width", "1.8957");
                                    st.push(pupil);

                                    //flame big
                                    var flameBig = paper.path("M64.131,106.718c0.531,1.115,0.836,2.385,0.836,3.732c0,1.285-0.215,3.141-0.777,4.164 c-1.877-2.107-1.623-1.139-1.508,0.744c0.068,1.059,0.09,2.4-0.33,3.65c-1.092,3.273-3.737,5.453-4.293,10.074 c-0.741-2.201-0.889-13.516-3.297-6.98c-1.123-1.232-2.019-2.701-2.687-4.252c-1.072-2.486-1.572-5.178-1.529-7.4 c0.025-1.43,0.381-2.77,0.973-3.926c-3.793,2.258-6.354,6.533-6.354,11.445c0,0.955,0.096,2.102,0.281,3.23 c0.395,2.443,1.281,5.541,4.301,10.623c2.916,4.914,6.447,9.219,7.413,16.83c3.208-8.119,0.648-17.119,5.715-11.494 c2.551-3.564,4.557-7.244,5.816-10.828c1.016-2.887,1.553-5.709,1.498-8.361C70.098,113.203,67.713,109.027,64.131,106.718");
                                    flameBig.attr("fill", "#8DC63F");
                                    flameBig.attr("stroke", "none");
                                    st.push(flameBig);

                                    //little flame
                                    var flameLittle = paper.path("M54.016,108.464c0-2.02,1.637-3.656,3.662-3.656c2.016,0,3.616,1.637,3.657,3.656 c0.053,2.66-2.823,5.869-3.811,8.535C56.621,114.283,54.016,110.902,54.016,108.464");
                                    flameLittle.attr("fill", "#00A5D9");
                                    flameLittle.attr("stroke", "none");
                                    st.push(flameLittle);

                                    //st.scale(2, 2, 0, 0);
                                    pupil.animate({ r: 12 }, 500, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                        pupil.animate({ r: 4 }, 300, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                            pupil.animate({ r: 8.5 }, 800, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                                pupil.animate({ cx: 52, cy: 56 }, 600, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                                    pupil.animate({ cx: 63 }, 900, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                                        pupil.animate({ cx: 58.13 }, 200, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                                            pupil.animate({ r: .5 }, 50, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                                                pupil.animate({ r: 8.5 }, 200, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                                                    pupil.animate({ r: .5 }, 50, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                                                        pupil.animate({ r: 8.5 }, 200, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                                                            pupil.animate({ r: .5 }, 100, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                                                                pupil.animate({ r: 8.5 }, 200, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                                                                    pupil.animate({ r: .5 }, 100, "cubic-bezier(0, 0, 0.58, 1.0)", function () {
                                                                                        pupil.animate({ r: 8.5 }, 300, "cubic-bezier(0, 0, 0.58, 1.0)", function () {

                                                                                            //st.rotate(30, 0, 0);
                                                                                        });
                                                                                    });
                                                                                });
                                                                            });
                                                                        });
                                                                    });
                                                                });
                                                            });
                                                        });
                                                    });
                                                });
                                            });
                                        });
                                    });

                                }
                                $(document).ready(function () {
                                    if ($("#robowijmo").length === 1)
                                        drawRobo();
                                });
                            </script>
                        </div>
                        <div role="complementary" class="yui-u demos-nav">
                            <div id="demo-config-menu">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div role="navigation" class="yui-b left-nav">
                <h4>
                    Widgets</h4>
                <ul>
                    <li><a href="linechart/index.html">Charts - LineChart</a> </li>
                    <li><a href="piechart/index.html">Charts - PieChart</a> </li>
                    <li><a href="barchart/index.html">Charts - BarChart</a> </li>
                    <li><a href="combobox/index.html">Combobox</a> </li>
                    <li><a href="grid/index.html">Grid</a> </li>
                    <li><a href="inputmask/index.html">Input Mask</a> </li>
                    <li><a href="inputnumber/index.html">Input Number</a> </li>
                    <li><a href="inputdate/index.html">Input Date</a> </li>
                    <li><a href="pager/index.html">Pager</a> </li>
                    <li><a href="tree/index.html">Tree</a> </li>
                    <li><a href="wizard/index.html">Wizard</a> </li>
                </ul>
                <h4>
                    Utilities</h4>
                <ul>
                    <li><a href="datasource/index.html">Datasource</a> </li>
                </ul>
            </div>
        </div>
        <!-- <div id="ft" role="contentinfo">
            <p>
            Footer</p>
            </div>-->
    </div>
</body>
</html>
